<link rel="import" href="polymer-animation.html">
<polymer-element name="polymer-bounce" extends="polymer-animation">
  <script>
    Polymer('polymer-bounce', {
			targetSelector: '',
			duration: 1,
			magnitude: '-30px',
      ready: function() {
        this.super();
        this.magnitudeChanged();
      },
      magnitudeChanged: function() {
        this.generate();
      },
      generate: function() {
        var parsed = this.magnitude.match(/([\-0-9]+)(.*)/);
        this.properties = {
          transform: [
            {offset: 0, value: 'translateY(0)'},
            {offset: 0.2, value: 'translateY(0)'},
            {offset: 0.4, value: 'translateY(' + this.magnitude + ')'},
            {offset: 0.5, value: 'translateY(0)'},
            {offset: 0.6, value:'translateY(' + Number(parsed[1]) / 2 + parsed[2] + ')'},
            {offset: 0.8, value: 'translateY(0)'},
            {offset: 1, value: 'translateY(0)'}
          ]
        };
      }
    });
  </script>
</polymer-element>
